<!-- 企业库的详情 -->
<template>
	<a-modal v-bind="options" class="enterprise-detail-dialog">
		<template #title>
			<span>
				详情 - {{ record.enterpriseData.enterPriseName }} - {{ record.enterpriseData.linkmanName }} /
				{{ record.enterpriseData.linkmanPhone }}
			</span>
			<a-tag :color="tagColor[props.status]" style="margin-left: 5px">{{ statusData[props.status] }}</a-tag>
		</template>

		<a-tabs v-model:activeKey="activeKey">
			<a-tab-pane key="settleIn" tab="入驻信息">
				<entry-information :enterpriseData="record.enterpriseData" :id="props.id"></entry-information>
			</a-tab-pane>
			<!-- 详情 -->
			<a-tab-pane key="charterContract" tab="企业合同">
				<charter :id="props.id"></charter>
			</a-tab-pane>
			<!-- <a-tab-pane key="agree" tab="协议合同"><a-empty /></a-tab-pane> -->
			<a-tab-pane key="staff " tab="员工信息">
				<staff-pool :id="enterpriseId"></staff-pool>
			</a-tab-pane>
		</a-tabs>

		<template #footer>
			<template v-if="activeKey === 'settleIn'">
				<a-button
					type="primary"
					v-if="
						(props.status !== 3 && hasPermissions('mk_contract_enterprise_library_qyrk')) ||
						(props.status !== 4 && hasPermissions('mk_contract_enterprise_library_bj'))
					"
					@click="handler(1)">
					{{ props.status === 3 || props.status === 4 ? '重新入库' : '编辑' }}
				</a-button>
				<a-button
					v-if="props.status !== 3 && props.status !== 4 && hasPermissions('mk_contract_enterprise_library_zzht')"
					@click="handler(2)">
					终止合作
				</a-button>
				<!-- <a-button v-show="props.status !== 3 && props.status !== 4" @click="handler(3)">续期合约</a-button> -->
				<a-button
					v-if="props.status !== 3 && props.status !== 4 && hasPermissions('mk_contract_charter_party_tjbzht')"
					@click="handler(4)">
					企业合同签约
				</a-button>
				<!-- <a-button v-show="props.status !== 3 && props.status !== 4" type="primary" @click="handler(5)">协议合同</a-button> -->
			</template>
			<a-button v-else @click="options.onCancel()">关闭</a-button>
		</template>
	</a-modal>

	<!--终止多笔合约 -->
	<terminateMultipleContracts
		v-model:visible="record.isShowTreaty"
		:id="record.enterpriseData.id"
		:tableData="record.tableList"></terminateMultipleContracts>

	<!-- 重新编辑 -->
	<enterpriseWarehousing
		v-model:visible="record.warehousing"
		:type="record.enterType"
		:id="props.id"
		@close="close"></enterpriseWarehousing>

	<!-- 包租合同 -->
	<signing-dialog v-model:visible="visibles.addCharter" :signing-type="'charter'" :id="props.id" />
</template>

<script setup lang="ts">
	import {reactive, ref, toRef, watch, createVNode} from 'vue'
	import {Modal} from 'ant-design-vue'
	import {ExclamationCircleFilled} from '@ant-design/icons-vue'
	import {tagColor, statusData} from '@/constant/enterprise-customers'
	import {enterpriseDetails, terminationCooperation, cooperationCycleList} from '@/api/enterprise-library'
	import StaffPool from '@/pages/contract/enterprise/staff-pool.vue'
	import EnterpriseWarehousing from '@/components/contract/enterprise-customer-management/enterprise-warehousing.vue'
	import EntryInformation from '@/components/contract/enterprise-customer-management/entry-information.vue'
	import TerminateMultipleContracts from '@/components/contract/enterprise-customer-management/terminate-multiple-contracts.vue'
	import Charter from '@/pages/contract/charter/index.vue'
	import {useStore} from '@/store'

	const hasPermissions = useStore().hasPermissions

	const emits = defineEmits(['update:visible', 'close', 'reflush'])
	const props = defineProps<{
		visible: boolean
		id: string
		status: string | number
	}>()

	const enterpriseId = ref('')
	const activeKey = ref('settleIn')
	const activeId = ref(1)

	const visibles = reactive({
		addCharter: false
	})

	const options = reactive({
		width: '80vw',
		centered: true,
		maskClosable: false,
		destroyOnClose: true,
		visible: toRef(props, 'visible'),
		onCancel() {
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const changeActive = (id: number) => {
		activeId.value = id
	}

	const handler = (field: number) => {
		// 1编辑 2 终止合约 3 续期合约 4包租合同  5 协议合同
		switch (field) {
			case 1:
				record.warehousing = true
				setTimeout(() => {
					emits('update:visible', false)
				}, 100)
				break
			case 2:
				cooperationCycleFun()
				break
			case 3:
				break
			case 4:
				visibles.addCharter = true
				break
			case 5:
				break
		}
	}
	const record = reactive<any>({
		isShowTreaty: false,
		enterpriseData: {},
		tableList: [],
		warehousing: false,
		enterType: 'storage',
		id: ''
	})

	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				activeKey.value = 'settleIn'
				enterpriseDetails(props.id).then(res => {
					enterpriseId.value = res.data.id
					record.enterpriseData = res.data
					if (res.data.contacts) {
						record.enterpriseData.contacts = res.data.contacts.map((e: any) => {
							return {
								...e
								// isFirstChoice: e.isFirstChoice ? false : true
							}
						})
					}
					record.enterpriseData.teamworks = res.data.teamworks || []
					if (res.data.teamworks) {
						record.enterpriseData.teamworks.forEach((e: any) => {
							e?.discounts?.forEach((o: any) => {
								o.dictionaryExpensesType = o?.dictionaryExpensesTypeName
							})
						})
					}
				})
			}
		}
	)

	//终止合约
	const terminationCooperationFun = () => {
		terminationCooperation({enterPriseId: record.enterpriseData.id}).finally(() => emits('close'))
	}

	// 查询企业周期列表
	const cooperationCycleFun = () => {
		cooperationCycleList(record.enterpriseData.id).then(res => {
			if (res.data.length > 1) {
				//终止多笔合约
				record.tableList = res.data
				record.isShowTreaty = true
			} else {
				//终止单笔合约
				Modal.confirm({
					title: () => '确定要终止合作吗?',
					icon: () => createVNode(ExclamationCircleFilled),
					content: () => createVNode('div', {}, '终止合作后,已签约的合同仍享受优惠价格,新签或续签合同将不再享受优惠价格'),
					onOk() {
						terminationCooperationFun()
					},
					onCancel() {
						console.log('Cancel')
					},
					class: 'test'
				})
			}
		})
	}
	const close = () => {
		emits('close')
		emits('reflush')
	}
</script>

<style lang="less">
	.enterprise-detail-dialog {
		.ant-modal-body {
			height: 80vh;
			padding: 0;
			overflow: auto;
		}

		// .tabs-pane {
		// 	height: 65vh;
		// 	overflow-y: auto;
		// }
	}

	.enterprise-detail-dialog .ant-modal-body > .ant-tabs {
		height: 100%;

		> .ant-tabs-nav {
			background: transparent;
			margin-bottom: 0;
			padding: 0 12px;
		}

		> .ant-tabs-content-holder {
			flex: 1;
			min-height: 0;

			.ant-tabs-content {
				height: 100%;

				.ant-tabs-tabpane {
					height: 100%;
					overflow: auto;

					&:first-child {
						padding: 12px;
					}
				}
			}
		}
	}
</style>
